<template>
  <div>
    <el-form v-loading="loading" class="lineHeight32 mb0" label-width="110px" label-position="right">
      <el-row :gutter="8" :class="{'dividing':!isMobile}" class="response-el-row">
        <el-col :span="8" class="responsive-col-lg-8" >
          <el-form-item label="结算月份:">
            <span>{{ detailData.month }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="responsive-col-lg-8" >
          <el-form-item label="创建时间:">
            <span>{{ detailData.createTime / 1000 | standardFormat('YYYY/MM/DD HH:mm:ss') }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="responsive-col-lg-8" >
          <el-form-item label="创建人:">
            <span>{{ detailData.creator | filterNon }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="responsive-col-lg-8" >
          <el-form-item label="状态:">
            <span>{{ statusMap[detailData.status] | filterNon }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="responsive-col-lg-8" >
          <el-form-item label="仓库:">
            <span>{{ detailData.repositoryName | filterNon }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { standardFormat, standardFormatMonth } from '@/filters/date';

export default {
  filters: {
    standardFormat,
    standardFormatMonth,
    filterNon(val) {
      return (val !== 0 && !val) ? '--' : val;
    }
  },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      statusMap: ['核算中', '已核算']
    };
  }
};
</script>

<style lang="scss" scoped>
.mb0 {
  margin-bottom: 32px;
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        color: #999;
      }
    }
    .dividing{
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
          color: #333;
        }
        @media only screen and (min-width: 1300px) {
          &:nth-child(3n) {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
        // &:last-child {
        //   .el-form-item__content {
        //     border-right: none;
        //   }
        // }
      }
    }
  }
}
</style>
